<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>请假审核</title>
    <link rel="stylesheet" href="/plug/layui/css/layui.css">
</head>
<body>
<div style="margin: 20px">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">申请人</label>
                <div class="layui-input-inline">
                    <input type="text" name="sName" autocomplete="off" class="layui-input" th:value="${sName == null ? '' : sName}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">请假类型</label>
                <div class="layui-input-block">
                    <select name="type">
                        <option value="">请选择</option>
                        <option value="1" th:selected="${type == 1}">事假</option>
                        <option value="2" th:selected="${type == 2}">公假</option>
                        <option value="3" th:selected="${type == 3}">病假</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status">
                        <option value="">请选择</option>
                        <option value="1" th:selected="${status == 1}">待审核</option>
                        <option value="2" th:selected="${status == 2}">通过</option>
                        <option value="3" th:selected="${status == 3}">未通过</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" type="button" onclick="search()">检索</button>
                <button class="layui-btn" type="reset">重置</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
        <tr>
            <th>申请人</th>
            <th>角色类型</th>
            <th>审批人</th>
            <th>请假类型</th>
            <th>备注</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="data : ${page.records}">
            <td th:text="${data.sName}"></td>
            <td th:text="${data.approvalType == null ? '' : data.approvalType}"></td>
            <td th:text="${data.approvalType == null ? '' : (data.approvalType == 1 ? data.aName : data.tName)}"></td>
            <td th:text="${data.type == 1 ? '事假' : (data.type == 2 ? '公假' : '病假')}"></td>
            <td th:text="${data.remarks}"></td>
            <td th:text="${data.status == 1 ? '待审核' : (data.status == 2 ? '通过' : '未通过')}"></td>
            <td th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td width="100px">
                <button th:if="${data.status == 1}" class="layui-btn layui-btn-warm" type="button" th:onclick="'review(' + ${data.id} + ')'">审核</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="page"></div>
</div>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/plug/layui/layui.all.js"></script>
<script>
    $("input[type=reset]").click(function () {
        $(".layui-form select").val("");
    });
    layui.use(['form', 'laypage'], function() {
        const form = layui.form;
        const page = layui.laypage;
        form.render('select');
        page.render({
            elem: 'page',
            count: [[${page.total}]],
            limit: 10,
            curr: [[${page.current}]],
            jump: function (obj, first) {
            if(first) {
                return;
            }
            location.href = `/leave/list?pageNo=${obj.curr}&${$("#search-form").serialize()}`;
        }
        });
    });

    function search() {
        location.href = '/leave/list?pageNo=1&' + $(".layui-form").serialize();
    }

    function review(id) {
        layer.confirm('审核通过吗？', {
            btn: ['通过', '不通过'] //按钮
        }, function() {
            $.post("/leave/review", { id: id, status: 2 }, function (rest) {
                layer.msg(rest.msg);
                if(rest.code === 200) {
                    location.reload();
                }
            });
        }, function () {
            $.post("/leave/review", { id: id, status: 3 }, function (rest) {
                layer.msg(rest.msg);
                if(rest.code === 200) {
                    location.reload();
                }
            });
        });
    }
</script>
</body>
</html>